<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap4.5.min.css">
    <title>建筑工程</title>
    <style>
        li {
            list-style: none;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        .row {
            margin: 0;
        }
        
        @media (min-width:576px) {
            .container {
                max-width: 576px;
                padding: 0;
            }
        }
        
        @media (min-width:768px) {
            .container {
                max-width: 768px;
                padding: 0;
            }
        }
        
        @media (min-width:992px) {
            .container {
                max-width: 992px;
                padding: 0;
            }
        }
        
        @media (min-width:1200px) {
            .container {
                max-width: 1200px;
                padding: 0;
            }
        }
        
        .architecture_title {
            text-align: center;
        }
        
        .architecture_title span {
            color: #999999;
        }
        
        .architecture_list_box_txt {
            padding: 40px 30px;
            text-align: center;
        }
        
        .architecture_list_box_txt p {
            font-size: 12px;
            color: #999999;
        }
        
        .architecture_list {
            padding: 50px;
        }
        
        .architecture_list ul li:nth-child(even) .architecture_list_box {
            display: flex;
            flex-direction: column-reverse;
        }
        
        .architecture_list_box_img {
            overflow: hidden;
        }
        
        .architecture_list_box_img img {
            width: 100%;
        }
        
        .architecture_list_box_img:hover img {
            transform: scale(1.2);
            cursor: pointer;
            transition: .8s;
        }
        
        @media(max-width:768px) {
            .architecture_list ul li:nth-child(even) .architecture_list_box {
                display: flex;
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="architecture">
        <div class="container">
            <div class="architecture_title">
                <h2>企业优势</h2>
                <span>Advantage</span>
            </div>
            <div class="architecture_list">
                <ul class="row">
                    <li class="col-lg-3 col-md-3 col-12">
                        <div class="architecture_list_box">
                            <div class="architecture_list_box_img">
                                <img src="img/architecture/img1.webp" alt="">
                            </div>
                            <div class="architecture_list_box_txt">
                                <h6>品质选材</h6>
                                <p>多道智能测试和人工检测</p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-12">
                        <div class="architecture_list_box">
                            <div class="architecture_list_box_img">
                                <img src="img/architecture/img2.webp" alt="">
                            </div>
                            <div class="architecture_list_box_txt">
                                <h6>品质选材</h6>
                                <p>多道智能测试和人工检测</p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-12">
                        <div class="architecture_list_box">
                            <div class="architecture_list_box_img">
                                <img src="img/architecture/img3.webp" alt="">
                            </div>
                            <div class="architecture_list_box_txt">
                                <h6>品质选材</h6>
                                <p>多道智能测试和人工检测</p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-12">
                        <div class="architecture_list_box">
                            <div class="architecture_list_box_img">
                                <img src="img/architecture/img4.webp" alt="">
                            </div>
                            <div class="architecture_list_box_txt">
                                <h6>品质选材</h6>
                                <p>多道智能测试和人工检测</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>